<template>
	<view class="market-page">
		<quill-editor disabled v-model="describe"  class="ql-editor"/>
		<view class="list">
			<form class="form-list">
				<view class="label-input" v-for="(item,index) in list" :key="index">
					<text class="titel">{{item.productName}}</text>
					<text class="" style="color: #666;" @click="jumpDetails(item.productId)">
						查看详情
						<image src="../../../../static/Chevron.png" mode=""></image>
					</text>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import api from 'api/modules/jinrong.js';
	
	export default {
		name: 'Market',
	
		data() {
			return {
				describe: '',
				pageParams: {
					pageSize: 1000,
					pageNum: 1
				},
				list: []
			}
		},
		mounted() {
			api.getFrontDetail({
				associationServiceId: 5
			}).then(res => {
				this.describe = res.data.serviceContent
			})

			this.getData()
		},
		methods: {
			getData() {
				api.getProductPage(this.pageParams).then(res => {
					this.list = res.data
				})
			},
			jumpDetails(id) {
				uni.navigateTo({
					url: `MarketDetail?productId=${id}`
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #F6F6F6;
	}

	.market-page {
		margin-top: 30rpx;

		.ql-editor {
			background-image: url(../../../../static/market-bgc.jpg);
			background-size: contain;
			background-repeat: repeat;

		}

		.list {
			padding: 24rpx;

			.form-list {
				.label-input {
					display: flex;
					background-color: #fff;
					justify-content: space-between;
					// min-height: 90rpx;
					padding: 20rpx;
					align-items: center;
					border-bottom: 1rpx solid #F6F6F6;

					image {
						margin-left: 10rpx;
						width: 20rpx;
						height: 20rpx;
					}

					.titel {
						display: inline-block;
						width: 70%;
						overflow: hidden; //超出的文本隐藏
						text-overflow: ellipsis; //溢出用省略号显示
						white-space: nowrap; //溢出不换行
					}
				}
			}

		}
	}
</style>
